<!DOCTYPE html>
<html>
    <head>
        <title>Tank</title>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="custom/images/favicon.ico?v=2" />
        <style>
            html, body {
                padding: 0px;
                margin: 0px;
            }
        </style>

        <script src='custom/configs/htconfig.js'></script>
        <script src='libs/ht.js'></script>

        <script>
            function init() {
                dataModel = new ht.DataModel();
                graphView = new ht.graph.GraphView(dataModel);
                graphView.addToDOM();

                ht.Default.xhrLoad('previews/display.json', function(text) {
                    var json = ht.Default.parse(text);
                    if (json.title) document.title = json.title;
                    dataModel.deserialize(json);
                    graphView.fitContent(true);

                    tankVolumes = {
                        'tank1': 10,
                        'tank2': 30,
                        'tank3': 60,
                        'tank4': 90,
                    };

                    setInterval(function(){
                        for (var tag in tankVolumes) {
                            tankVolumes[tag]++;
                            if (tankVolumes[tag] > 100) tankVolumes[tag] = 0;
                            var node = dataModel.getDataByTag(tag);
                            node.a('tank.volume', tankVolumes[tag] / 100);
                        }
                    }, 50);

                    dataModel.addScheduleTask({
                        interval: 200,
                        action: function(data){
                            if (data.a('tank.alarm') >= 400) {
                                data.a('tank.blink', !data.a('tank.blink'));
                            }
                        }
                    });
                });
            }

        </script>
    </head>
    <body onload='setTimeout(init, 300)'>
    </body>
</html>
